<template>
	<view class="page">
	
	<!-- 基本信息 -->
	<view class="publish-demand-wrapper">
		<view style="display: flex;flex-direction: row;align-items: center;
		margin-left: 30upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;justify-content: space-between;">
			<view style="display: flex;align-items: center;">

				<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">用户头像</span>
			</view>
			<img :src="userInfoForm.headPortrait" alt="" style="height: 60upx;width: 60upx;border-radius: 30upx;margin-right: 60upx;" @click="uploadImgLocal">
		</view>
		
		<view style="display: flex;flex-direction: row;align-items: center;
		margin-left: 30upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
			<view style="display: flex;align-items: center;">


				<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">用户昵称</span>
			</view>
	
			<input type="text" style="text-align: right;width: 70%;color: #191919;" maxlength="15" v-model="userInfoForm.account"
				placeholder="请输入用户昵称" />
	
		</view>
		
		<view style="display: flex;flex-direction: row;align-items: center;
		margin-left: 30upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
			<view style="display: flex;align-items: center;">


				<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">手机号码</span>
			</view>
			
			<input type="text" style="text-align: right;width: 70%;color: #191919;" maxlength="15" v-model="userInfoForm.mobile"
				placeholder="请输入手机号码" />
			
		</view>

		
	</view>
		<view style="position: fixed;bottom: 0upx;margin-bottom: 68upx;padding: 0 30upx;" @click="confirmUpdate">
			<view style="width: 690upx;height: 80upx;background: #E9A06F;border-radius: 40upx;
			text-align: center;line-height: 80upx;">确认修改</view>
		</view>

	</view>
</template>

<script>

	import {user_info,update_user} from '@/api/user.js'
	import {
		set
	} from '@/utils/local.js'


	export default {
		data() {
			return {

				isLogin:false,
				uploadImgList:[],
				imgList:[],
				userInfoForm:{}
			}
		},

		onLoad() {
			user_info({}).then(res=>{
				this.userInfoForm=res.data
			})
		},
		methods: {
			previewImg(index) {
				let imgsArray = [];
				for (let i = 0; i < this.uploadImgList.length; i++) {
						imgsArray.push(this.uploadImgList[i]);
					
				}
				uni.previewImage({
					current: index,
					urls: imgsArray,
					indicator: 'number',
					loop: true,
					longPressActions:{
						itemList:['保存图片'],
						success(res) {
							uni.downloadFile({
								url:this.uploadImgList[index],
								success(result) {
									uni.saveImageToPhotosAlbum({
										filePath:result.tempFilePath,
										success() {
											uni.showToast({
												title:'保存成功'
											})
										}
									})
								}
							})
						}
					}
				});
			},
			removeImg(index){
				console.log("index:"+index)
				var temArray=[]
				for (var i = 0; i < this.uploadImgList.length; i++) {
					if(i !==index){
						temArray.push(this.uploadImgList[i])
					}
				}
				this.uploadImgList=temArray
				
			},
			uploadImgLocal() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						this.uploadImgList=tempFilePaths
						this.userInfoForm.avatar=tempFilePaths[0]
					}
				})
			},
			uploadImgs(){
				const arr = []
				
				const _this = this
				for (var i = 0; i < this.uploadImgList.length; i++) {
					const a = new Promise(reslut => {
						uni.uploadFile({
							url: 'http://localhost:8901/common/upload/file',
							filePath:this.uploadImgList[i],
							name:'file',
							success(res) {
								_this.imgList.push(JSON.parse(res.data).data)
								reslut()
							}
						})
					})
					arr.push(a)
				}
				return Promise.all(arr)
			},
			confirmUpdate() {
				
				let params = this.userInfoForm;
				
				uni.showLoading({
					title:'修改中~',
					mask:true
				})
				set('userId',params.id)
				
				set('nickname',params.nickname)
				this.uploadImgs().then(() =>{
					params.avatar=this.imgList[0]
					set('avatar',params.avatar)
					update_user(params).then(res => {
						if (res.code === "200") {
							uni.hideLoading()
							uni.showToast({
								title:'修改成功'
							})
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/my/my'
								})
							},1000)

						}
					})
				})
			},

		}
	}
</script>

<style>
	.page {
		color: #F8F8F8;
	}

	.publish-demand-wrapper {
		display: flex;
		flex-direction: column;
		margin-top: 24upx;
		background: #FFFFFF;
	}
</style>